<!DOCTYPE html>
<html lang="en">
<!-- head -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DragonFly</title>
    <link rel="icon" type="image/png" href="./resource/icon.png">

    <!-- 后面的样式会覆盖前面的样式 -->
    <!-- 全局css -->
    <link rel="stylesheet" href="./css/global.css">
    <!-- 文本的css -->
    <link rel="stylesheet" href="./css/text.css">
    <!-- index页面特有css -->
    <link rel="stylesheet" href="./css/index_style.css">

</head>

<!-- body -->

<body>
    <header>
        <section>
            <p>欢迎来到我的网站</p>
            <p>这是一个简单的网站, 这是一段介绍词</p>
            <p>占位文字, <span class="sketchy-underline">占位文字</span>, 占位文字, 占位文字, 占位文字, 占位文字, 占位文字</p>
        </section>
    </header>

    <!-- 侧边栏 -->
    <aside class="leftbar">
        <a class="box1" href="./index.html">主页</a>
        <a class="box2" href="./pages/about.html" target="_blank">关于</a>
        <a class="box3" href="./pages/content.html" target="_blank">内容</a>
        <a class="box4" href="./404.html" target="_blank">404</a>
        <a class="box5" href="./files/Easy Cat Timer/index.html" target="_blank">计时器</a>
    </aside>

    <aside class="rightbar">
        <span>搭建网站时可以随手取用的信息</span>
        <h3>主要元素颜色</h3>
        <div style="display: flex;flex-direction: column;box-shadow:0 8px 16px rgba(0,0,0,0.1)">
            <div style="background:#001BB7;padding:1rem;color:#fff">#001BB7</div>
            <div style="background:#0046FF;padding:1rem;color:#fff">#0046FF</div>
            <div style="background:#3B82F6;padding:1rem;color:#fff">#3B82F6</div>
            <div style="background:#FF8040;padding:1rem;color:#000">#FF8040</div>
            <div style="background:#F7CE46;padding:1rem;color:#000">#F7CE46</div>
            <div style="background:#E9E9E9;padding:1rem;color:#000">#E9E9E9</div>
        </div>
        <!-- 日志 -->
        <div id="log-panel"></div>
    </aside>

    <main>
        <section>
            <h1>我是谁?</h1>
            <p>一只<span class="sketchy-mark">龙</span>然后还需要写什么呢? 当然不需要什么, 这些只是无意义的占位文字.</p>
        </section>

        <section>
            <h2>这里是什么地方?</h2>
            <div class="sketchy-box">
                <p>一个展示板!一个笔记本!一个自留巢!</p>
            </div>

        </section>

        <section>
            <h2>这里有什么内容?</h2>
            <div>
                <p>这里什么内容都没有, 这里只是毛坯窝, 既没有住龙, 也没有装修.</p>
                <p>有朝一日, 我发觉我收集的东西实在是太多了, 然后不能随身携带, 所有就基于GithubPaper搭建了一个网站, 让我的东西可以被我随时查阅, 这就是网站的由来. </p>
            </div>
        </section>

    </main>

    <footer>
        2025 My Website - Dragonfly<br>May all dragons fly free.
    </footer>

    <div>
        <img class="show-dragon" src="./resource/sshow.png" alt="">
    </div>



</body>


<script>
    if (CSS["paintWorklet"] !== undefined) {
        CSS.paintWorklet.addModule("./bundle/worklet-sketchy-background.js");
        CSS.paintWorklet.addModule("./bundle/worklet-rough-box.js");
        CSS.paintWorklet.addModule("./bundle/worklet-sketchy-underline.js")
    }
</script>

<!-- 日志显示 -->
<script>
    const panel = document.getElementById('log-panel');
    fetch('Todo.txt')
        .then(res => res.text())
        .then(text => {
            panel.textContent = text;
        });
    // 页面加载完，滚动到底部
    window.addEventListener('load', () => {
        panel.scrollTop = panel.scrollHeight;
    });
</script>

</html>